Skip to main content

清除浮动

清除浮动分为两种情况：

  • 父元素
  • 子元素

父元素​

父元素设置 after(推荐)​

<div class="parent">
  <div class="child"></div>
</div>

<style>
  .parent:after {
    content: '';
    display: block; /*或者 table*/
    clear: both;
  }
  .parent {
    zoom: 1; /* IE 兼容*/
  }
  .child {
    float: left;
  }
</style>

父元素设置 overflow(有 BUG，不推荐)​

BFC 也能实现清除浮动的效果，但有副作用.

<div class="parent">
  <div class="child"></div>
</div>

<style>
  .parent {
    overflow: auto; /*或者 hidden*/
    zoom: 1;
  }
  .child {
    float: left;
  }
</style>

子元素​

添加子元素 clear​

<div class="parent">
  <div class="child"></div>
  <div class="clearfix "></div>
</div>

<style>
  .child {
    float: left;
  }
  .clearfix {
    clear: both;
  }
</style>

详细说下清除浮动各属性含义(父级伪元素)​

.father::after {
  clear: both;
  content: '';
  display: table;
}
  1. :after伪元素：在本元素的最后一个子元素之后，而非本元素之后，它们占用的空间仍然属于本元素
    • :after 和:before 的区别:
      • :after 伪元素：在本元素的最后一个子元素之后，而非本元素之后，它们占用的空间仍然属于本元素
      • :before 伪元素不适合清除浮动，因为它在源元素内部生成，是在原来的第一个子元素之前，而非本元素之前，仍将发生边距折叠。
  2. clear属性（清除浮动）：为了使:after 的左边或者两边不允许出现浮动元素
  3. content属性：利用伪元素必须声明 content 进行占位，否则无效
  4. display为块级元素：内联元素会跟在浮动元素后面，clear 属性也只有在块级元素才会起作用
    • table 和 block 的区别:
      • table：上方和下方的元素 margin 不合并，相当于在上下方元素之间隔了一个 BFC
      • block：上方和下方的元素发生 margin 合并